<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" type="text/css" href="/stylesheets/home.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

    </script>

</head>
<body>
<div id="mainbgview" class="contrainer">

    <div class="leftview">
        <div class="letf-nav">
            <p>菜单</p>
        </div>

        <div class="menu">
            <ul>
                <li><a class="menu_item" type="text/css"   id="usersManage" onclick='g(this.id)'   href="/home" >用户管理</a></li>
                <li><a class="menu_item" id="postsManage" style="background-color: #00B7FF" onclick='g(this.id)'  href="/post" >动态管理</a></li>
                <li><a class="menu_item" id="mineManage" onclick='g(this.id)' href="/mine" >个人信息管理</a></li>

            </ul>
        </div>
    </div>

    <div class="rightview">
        <div class="right-nav">
            <p>xxx后台管理系统</p>
        </div>

        <div class="showtitleView">
            <p>动态管理</p>
        </div>

        <div class="searchview">
            <input id="searchusername" type="text" name="nickname" placeholder="姓名">
            <button id="query" onclick="queryClick()">查询</button>
            <button id="add" onclick="addClick(0)">新增</button>

        </div>

        <table id="customers">


        </table>



    </div>




</div>


<div id="back">

</div>

<div id="form">

    <table  width="100%">
        <th height="44px">
            <label id="addtitle" style="float: left">
                新增
            </label>
            <img  onclick="hideDiv()" style="float: right;width: 22px;height: 22px;margin-right: 10px" src="/images/close.png">

        </th>
        <tr >
            <td style="padding: 0px;text-align: center" height="44px">
                <span style="float:left;margin-left: 10px;color: red;">*</span><label style="margin-left: 0px">动态内容:</label> <input style="width: 323px" id="content" type="text">
            </td>
        </tr>

        <tr>
            <td  style="height: 44px;text-align: center">
                <label>头像:</label> <input  style="float: left;width: 300px;height:80px;" id="upfile" type="file">

            </td>
        </tr>


        <tr>
            <td style="height: 44px;text-align: center">
                <span style="float:left;margin-left: 10px;color: red;">*</span><label style="margin-left: 0px">关联用户id:</label> <input style="width: 323px" id="userid" type="text">
            </td>
        </tr>

    </table>

    <div class="bottom">
        <button style="float:left;margin-left: 80px;" onclick="cancle()">取消</button>
        <button style="float:right;margin-right: 80px;" onclick="okClick()">确认</button>
    </div>




</div>

<script type="text/javascript">

    var dataArray = [];
    var post_id = "";

    var selectPage = 1;
    var sumPage = 0;
    var rows = 10;

    function createPage(selectindex) {


        var  customers = document.getElementById('customers');
        var tf = $("<tf colspan='8' style='position: absolute; background-color: white;width: 100%; height: 80px'>" + "</tf>");
        tf.appendTo(customers);
        var bgview=$("<div  style='float: right; margin-right: 10px;margin-top: 20px;vertical-align: middle;width: 440px;height: 40px;background-color: green'>" +
            +"</div>");

        bgview.appendTo(tf);


        var footview=$("<div class='footview' > </div>");
        footview.appendTo(bgview);

        var ul =  $("<ul class='footview#ul' > </ul>");
        ul.appendTo(footview);


        var max = 5;
        var min = 0;


        if(selectindex==1){
            var li =   $("<li class='footview#ul#li'><a id='100'  name='left' onclick='nextpage(this.name)' " +
                "class='ss'><img src='/images/leftarrowgray.png'  " +
                "></a></li>");
            li.appendTo(ul);
        }
        else {
            var li =   $("<li class='footview#ul#li'><a id='100'  name='left' onclick='nextpage(this.name)' class='footview#ul#li#a'><img src='/images/leftarrow.png'  " +
                "onmousemove="+'"'+"this.src='/images/leftarrow1.png'"+'"'+
                "onmouseout="+'"'+"this.src='/images/leftarrow.png'"+'"'+"></a></li>");
            li.appendTo(ul);
        }




        //小于等于8页的话，就让显示整页
        if(sumPage <=8){
            max = sumPage;
            for(var i =1;i<=max;i++) {

                if (selectindex == i) {
                    var li = $("<li  class='footview#ul#li'><a class ='page_item'  style='background-color: #00B7FF' name='" + i + "' onclick='page(this.name)' class='footview#ul#li#a'> " + i + "</a> </li>");
                    li.appendTo(ul);
                }
                else {
                    var li = $("<li class='footview#ul#li'><a class ='page_item'  name='" + i + "' onclick='page(this.name)' class='footview#ul#li#a'> " + i + "</a> </li>");
                    li.appendTo(ul);

                }
            }
        }
        else {

            if((selectindex-1)>=5&&(sumPage-selectindex)>=5){
                for(var i =1;i<=5;i++) {
                    if(i==1){
                        var li = $("<li  class='footview#ul#li'><a class ='page_item'   name='" + '1' + "' onclick='page(this.name)' class='footview#ul#li#a'> " + i + "</a> </li>");
                        li.appendTo(ul);
                    }
                    else if(i==2){
                        var li =   $("<li class='footview#ul#li'><a id='100'  name='bigleft' onclick='bignextpage(this.name)' class='footview#ul#li#a'><img src='/images/dian.png'  " +
                            "onmousemove="+'"'+"this.src='/images/leftpage.png'"+'"'+
                            "onmouseout="+'"'+"this.src='/images/dian.png'"+'"'+"></a></li>");
                        li.appendTo(ul);
                    }
                    else if(i==4){
                        var li =   $("<li class='footview#ul#li'><a id='100'  name='bigright' onclick='bignextpage(this.name)' class='footview#ul#li#a'><img src='/images/dian.png'  " +
                            "onmousemove="+'"'+"this.src='/images/rightpage.png'"+'"'+
                            "onmouseout="+'"'+"this.src='/images/dian.png'"+'"'+"></a></li>");
                        li.appendTo(ul);
                    }
                    else if(i==5){
                        var li = $("<li  class='footview#ul#li'><a class ='page_item'   name='" + sumPage + "' onclick='page(this.name)' class='footview#ul#li#a'> " + sumPage + "</a> </li>");
                        li.appendTo(ul);
                    }
                    else {

                        for (var j = selectindex - 2; j <= selectindex + 2; j++) {
                            if(j==selectindex){
                                var li = $("<li  class='footview#ul#li'><a class ='page_item'  style='background-color: #00B7FF' name='" + j + "' onclick='page(this.name)' class='footview#ul#li#a'> " + j + "</a> </li>");
                                li.appendTo(ul);
                            }
                            else {
                                var li = $("<li  class='footview#ul#li'><a class ='page_item'   name='" + j + "' onclick='page(this.name)' class='footview#ul#li#a'> " + j + "</a> </li>");
                                li.appendTo(ul);
                            }

                        }

                    }
                }

            }
            else if((selectindex-1)<5) {
                for(var i =1;i<=8;i++) {
                    if(i<7){
                        if(i==selectindex){
                            var li = $("<li  class='footview#ul#li'><a class ='page_item'  style='background-color: #00B7FF' name='" + i + "' onclick='page(this.name)' class='footview#ul#li#a'> " + i + "</a> </li>");
                            li.appendTo(ul);
                        }
                        else {
                            var li = $("<li  class='footview#ul#li'><a class ='page_item'   name='" + i + "' onclick='page(this.name)' class='footview#ul#li#a'> " + i + "</a> </li>");
                            li.appendTo(ul);
                        }
                    }
                    else if(i==7){
                        var li =   $("<li class='footview#ul#li'><a id='100'  name='bigright' onclick='bignextpage(this.name)' class='footview#ul#li#a'><img src='/images/dian.png'  " +
                            "onmousemove="+'"'+"this.src='/images/rightpage.png'"+'"'+
                            "onmouseout="+'"'+"this.src='/images/dian.png'"+'"'+"></a></li>");
                        li.appendTo(ul);
                    }
                    else {
                        var li = $("<li  class='footview#ul#li'><a class ='page_item'   name='" + sumPage + "' onclick='page(this.name)' class='footview#ul#li#a'> " + sumPage + "</a> </li>");
                        li.appendTo(ul);
                    }
                }
            }
            else if((sumPage-selectindex)<5) {
                for(var i =1;i<=3;i++) {
                    if(i==1){
                        var li = $("<li  class='footview#ul#li'><a class ='page_item'   name='" + '1' + "' onclick='page(this.name)' class='footview#ul#li#a'> " + i + "</a> </li>");
                        li.appendTo(ul);
                    }
                    else if(i==2){
                        var li =   $("<li class='footview#ul#li'><a id='100'  name='bigleft' onclick='bignextpage(this.name)' class='footview#ul#li#a'><img src='/images/dian.png'  " +
                            "onmousemove="+'"'+"this.src='/images/leftpage.png'"+'"'+
                            "onmouseout="+'"'+"this.src='/images/dian.png'"+'"'+"></a></li>");
                        li.appendTo(ul);
                    }
                    else {
                        for (var j = sumPage - 5; j <= sumPage; j++) {
                            if(j==selectindex){
                                var li = $("<li  class='footview#ul#li'><a class ='page_item'  style='background-color: #00B7FF' name='" + j + "' onclick='page(this.name)' class='footview#ul#li#a'> " + j + "</a> </li>");
                                li.appendTo(ul);
                            }
                            else {
                                var li = $("<li  class='footview#ul#li'><a class ='page_item'   name='" + j + "' onclick='page(this.name)' class='footview#ul#li#a'> " + j + "</a> </li>");
                                li.appendTo(ul);
                            }

                        }
                    }
                }
            }


        }




        if(selectindex==sumPage){
            var li =   $("<li class='footview#ul#li'><a   id='101' name='right' onclick='nextpage(this.name)' " +
                "class='ss'><img src='/images/rightarrowgray.png'  "+" ></a></li>");
            li.appendTo(ul);
        }
        else {
            var li =   $("<li class='footview#ul#li'><a id='101' name='right' onclick='nextpage(this.name)'" +
                " class='footview#ul#li#a'><img src='/images/rightarrow.png'  " +
                "onmousemove="+'"'+"this.src='/images/rightarrow1.png'"+'"'+
                "onmouseout="+'"'+"this.src='/images/rightarrow.png'"+'"'+"></a></li>");
            li.appendTo(ul);
        }


    }


    function bignextpage(name) {

        if(name == 'bigleft'){
            if(selectPage == 1){
                return;
            }
            else if((selectPage-5)<1){
                selectPage = 1;
            }
            else {
                selectPage=selectPage-5;
            }
            g('postsManage');

        }
        else if(name == 'bigright'){

            if(selectPage == sumPage){
                return;
            }
            else if((selectPage+5)>sumPage){
                selectPage = sumPage;
            }
            else {
                selectPage=selectPage+5;
            }
            g('postsManage');
        }
    }

    function nextpage(name) {

        if(name == 'left'){
            if(selectPage == 1){
                return;
            }
            selectPage=selectPage-1;
            g('postsManage');

        }
        else if(name == 'right'){

            if(selectPage == sumPage){
                return;
            }
            selectPage=selectPage+1;
            g('postsManage');
        }
    }


    onload = function () {
        g('postsManage');
    }
    /*删除行，采用deleteRow(row Index)*/
    function removeRow(){
        /* var row=document.getElementById("2");
         var index=row.rowIndex;
         alert(index);*/
        var  customers = document.getElementById('customers');
        var rowNum=customers.rows.length;
        for (i=0;i<rowNum;i++)
        {
            customers.deleteRow(i);
            rowNum=rowNum-1;
            i=i-1;
        }

    }

    function g(x)
    {


        d=document.getElementsByClassName("menu_item");
        for(p=d.length;p--;){
            if(d[p].id!=x){d[p].style.backgroundColor='#f1f1f1';/*其他*/}
            else{d[p].style.backgroundColor='#00B7FF';/*点击的*/}
        }

        if(x=='usersManage'){
//            $.get("/users/list", function(result){
//                createTable(result);
//            });

            window.location.href='home';

        }
        else if(x=='postsManage'){
            getUserListData();

        }
        else if(x=='mineManage'){
            window.location.href='mine';

        }

    }


    function getUserListData() {
        var searchUserName = document.getElementById("searchusername").value;
        $.post("/post/list",{
                username:searchUserName,
                page:selectPage,
                rows:rows
            },
            function(data,status) {
                var dataObj = eval("(" + data + ")");//转换为json对象
                if (dataObj.status == 200 || dataObj.status == 201) {
                    sumPage = dataObj.sumpage;
                    var last=JSON.stringify(dataObj.data); //将JSON对象转化为JSON字符
                    if(dataObj.data.length<=0){
                        alert("无查询结果\n");
                    }
                    else {
                        createTable(last);
                    }
                }
                else {
                    alert("数据: \n" + dataObj.msg + "\n状态: " + dataObj.status);
                }

            });
    }


    function createTable(result) {
        var  customers = document.getElementById('customers');
        removeRow();



        var data = eval("(" + result + ")");//转换为json对象

        var postInfo = function (id,userid,username,content,coverimageurl,createtime) {
            this.id = id;
            this.userid=userid;
            this.username=username;
            this.content=content;
            this.coverimageurl=coverimageurl;
            this.createtime=createtime;

        }


        var posts =[];
        for(var i= 0;i<data.length;i++){
            var d = data[i];
            var user =  d["user"];
            posts.push(new postInfo(d["_id"],user["_id"],user["username"],d["content"],d["coverimageurl"],d["createtime"]));
        }
        dataArray = posts;



        var head = '姓名,动态内容,动态图片,创建时间,操作'.split(',');
        var tr=$("<tr></tr>");
        tr.appendTo(customers);

        for(var i= 0;i<head.length;i++) {
            var p = head[i];
            var th = $("<th style='background-color: white;height: 35px'>" + p + "</th>");
            th.appendTo(tr);

        }


        for(var i= 0;i<posts.length;i++) {
            var tr=$("<tr></tr>");
            tr.appendTo(customers);
            var obj = posts[i];
            var title = 'username,content,coverimageurl,createtime,handle'.split(',');

            for(var j= 0;j<title.length;j++) {
                var op = title[j];
                var opStr = obj[op];

                var id = obj['id'];

                if(!opStr){
                    opStr ="";
                }

                if(j==title.length-1){

                    var td = $("<td style=' background-color: white;width: 150px'>" +
                        "<button id="+i+"  onclick='editClick(this.id)' >编辑</button>"+"<button id="+i+" onclick='deleteClick(this.id)'>删除</button>" +
                        "</td>");
                    td.appendTo(tr);
                }
                else {
                    if (j == title.length - 2) {
                        opStr = dataString(opStr, 1);
                    }

                    var td = $("<td style='background-color: white;height: 40px'>" + opStr + "</td>");
                    td.appendTo(tr);

                }

            }
        }

        createPage(selectPage);
    }









    function page(x) {
        selectPage = parseInt(x);

        d=document.getElementsByClassName('page_item');
        for(p=d.length;p--;){
            if(d[p].name!=x){
                d[p].style.backgroundColor='#fff';/*其他*/
                d[p].style.color='#c9c9c9';/*其他*/

            }
            else
            {
                d[p].style.backgroundColor='#00B7FF';/*点击的*/
                d[p].style.color='#fff';/*其他*/

            }
        }

        g('postsManage');

    }

    function editClick(index) {
        addClick(1);
        var obj = dataArray[index];



        var content =  document.getElementById("content");
        var userid =  document.getElementById("userid");
        var coverimageurl =  document.getElementById("upfile");
        content.value = obj['content'];

        userid.value = obj['userid'];

        post_id = obj['id'];

    }

    function dataString(dateStr,type) {
        if(dateStr==""){
            return "";
        }

        var val = Date.parse(dateStr);
        var now = new Date(val);

        var seconds = ("0" + now.getSeconds()).slice(-2);

        var minutes = ("0" + now.getMinutes()).slice(-2);

        var hours = ("0" + now.getHours()).slice(-2);


//格式化日，如果小于9，前面补0
        var day = ("0" + now.getDate()).slice(-2);
//格式化月，如果小于9，前面补0
        var month = ("0" + (now.getMonth() + 1)).slice(-2);
//拼装完整日期格式

        if(type==0){
            var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
            return today;
        }
        else {
            var today = now.getFullYear()+"-"+(month)+"-"+(day)+" "+(hours)+":"+(minutes)+":"+(seconds) ;
            return today;
        }


    }




    function deleteClick(index) {

        var obj = dataArray[index];


        var msg = "删除数据将不能恢复，您真的确定要删除吗?";

        console.log(obj['id']);

        if (confirm(msg)==true){
            $.post("/post/delete",{
                    postid:obj['id']
                },
                function(data,status){
                    var dataObj=eval("("+data+")");//转换为json对象
                    if(dataObj.status==200||dataObj.status==201){
                        g('postsManage');

                    }
                    else {
                        alert("数据: \n" + dataObj.msg + "\n状态: " + dataObj.status);
                    }
                });


//            return true;

        }else{
//            return false;

        }
    }



    function queryClick() {
        var searchUserName = document.getElementById("searchusername").value;

        if(searchUserName==""){
            alert("请输入姓名");
            return;
        }
        else {
            getUserListData();
        }
    }

    function resetAddData() {
        var content =  document.getElementById("content");
        content.value = "";

        var userid =  document.getElementById("userid");
        userid.disabled = 'false';

        userid.value ="";

        var   filename = document.getElementById("upfile");
        filename.value ="";

    }

    function addClick(x){
        var addtitle =  document.getElementById("addtitle");

        var userid =  document.getElementById("userid");


        resetAddData();

        if(x==0){
            addtitle.innerText = "新增";
            userid.disabled = 'false';
        }
        else {
            addtitle.innerText = "编辑";
            userid.disabled = 'true';
        }

        var mainbgview =  document.getElementById("mainbgview");
        mainbgview.style.position = 'fixed';
        document.getElementById("back").style.display = 'block';
        document.getElementById("form").style.display = 'block';


    }

    function hideDiv() {
        var mainbgview =  document.getElementById("mainbgview")
        mainbgview.style.position = 'relative';

        document.getElementById("back").style.display = 'none';
        document.getElementById("form").style.display = 'none';

    }


    function okClick() {
        var content =  document.getElementById("content").value;
        if (content ==""){
            alert("动态内容为空");
            return;
        }

        var userid =  document.getElementById("userid").value;

        if (userid ==""){
            alert("用户id不能为空");
            return;
        }


        /* FormData 是表单数据类 */
        var fd = new FormData();
        var ajax = new XMLHttpRequest();



        if(content){
            fd.append("content",content);
        }

        if(userid){
            fd.append("userid",userid);
        }



        var addtitle =  document.getElementById("addtitle").innerText;
        if(addtitle =="编辑"){
            fd.append("postid",post_id);
        }


        var   filename = document.getElementById("upfile").value;

        if(filename){
            /* 把文件添加到表单里 */
            fd.append("avatar", document.getElementById("upfile").files[0]);
        }



        ajax.open("post", "upload/addpost", true);




        ajax.onreadystatechange = function () {
            if (ajax.readyState==4 && ajax.status==200) {

                var dataObj = eval("(" + ajax.responseText + ")");//转换为json对象
                if (dataObj.status == 200) {
                    hideDiv();
                    g('postsManage');


                }
                else {
                    alert("提示: \n" + dataObj.msg + "\n状态: " + dataObj.status);
                }
            }
        }

        ajax.send(fd);

    }

    function cancle() {
        hideDiv();
    }







</script>

</body>
</html>